<template>
	<div>
		<div class="pageTitle boxFlex">
			加入团队
			<!-- <el-button>创建</el-button> -->
		</div>
		<div class="pageContent">
			<div class="sectionTitle">搜索您需要加入的团队</div>
			<div class="sectionCont">
				<el-input v-model="search" placeholder="请输入内容" @keyup.enter.native="searchGs">
					<el-button slot="append" icon="el-icon-search" @click="searchGs"></el-button>
				</el-input>
				<div class="consequenceList" v-if="searchDataList && searchDataList.length > 0">
					<div class="consequenceItem flex" v-for="item in searchDataList" :key="item.id">
						<div class="consequenceTitle">{{ item.companyName }}</div>
						<el-button type="text" v-if="!item.isApply" @click="applyJoin(item)">申请加入</el-button>
						<el-button type="text" v-else disabled>已申请</el-button>
					</div>
				</div>
			</div>
			<div class="sectionTitle">通过区域搜索加入</div>
			
			
			<el-form :model="addressArry" ref="numberValidateForm" label-width="10rem" class="demo-ruleForm">
				<el-form-item label="搜索区域：">
					<!-- <div> -->
						<el-select v-model="addressArry.province" class="el-select" placeholder="请选择" @change="selectProvinceData">
							<el-option v-for="province in addressArry.provinceList" :label="province.name" :value="province.id"></el-option>
						</el-select>
						<el-select v-model="addressArry.city" class="el-select" placeholder="请选择" @change="selectCityData">
							<el-option v-for="city in addressArry.cityList" :label="city.name" :value="city.id"></el-option>
						</el-select>
						<el-select v-model="addressArry.district" class="el-select" placeholder="请选择" @change="selectDistrictData">
							<el-option v-for="district in addressArry.districtList" :label="district.name" :value="district.id"></el-option>
						</el-select>
						<el-select v-model="addressArry.town" class="el-select" placeholder="请选择" @change="selectTownData">
							<el-option v-for="town in addressArry.townList" :label="town.name" :value="town.id"></el-option>
						</el-select>
						<!-- <el-button @click="addsearch">搜索</el-button> -->
						<!-- <area-cascader v-model="addressArry.addressData" style="width: 500px;float: left;margin-right: 10px;" :data="$pcaa" :level="2" type="text" icon="el-icon-arrow-down" placeholder="请选择地区"></area-cascader> -->
					<!-- </div> -->
					<el-button @click="addsearch" type="primary">搜索</el-button>
				</el-form-item>
			</el-form>
			<div class="consequenceList" v-if="searchBottomDataList && searchBottomDataList.length > 0">
				<div class="consequenceItem flex" v-for="item in searchBottomDataList" :key="item.id">
					<div class="consequenceTitle">{{ item.companyName }}</div>
					<el-button type="text" v-if="!item.isApply" @click="applyJoin(item)">申请加入</el-button>
					<el-button type="text" v-else disabled>已申请</el-button>
				</div>
			</div>
			<div class="sectionTitle flex" style="margin-top: 60px;">
				<div>通过范围搜索加入</div>
			</div>
			<div class="demo-ruleForm flex" style="margin-top: 20px;">
				<el-select v-model="distanceID" class="el-select" placeholder="请选择" @change="selectDistance" style="width:100%">
					<el-option v-for="item in addressValue" :label="item.addressId" :value="item.id"></el-option>
				</el-select>
				<div class="flex el-inputBox">
					<el-input v-model="distance.distance" class="el-inputBoxel-inputBox" placeholder="请输入范围">
						<template slot="append">公里</template>
					</el-input>
					<div style="margin-left: 10px;">
						<el-button icon="el-icon-search" type="primary" @click="nearby">搜索</el-button>
					</div>
				</div>
			</div>
			<div class="sectionCont">
				<!-- <div class="flex el-inputBox">
					<el-input v-model="input" class="el-inputBoxel-inputBox" placeholder="请输入内容">
						<template slot="append">米</template>
					</el-input>
					<div>
						<el-button>搜索</el-button>
					</div>
				</div> -->
				<div class="mapBox flex">
					<div class="mapBoxmapBox" id="container">
						<baidu-map class="bm-view mapBoxmapBox" :center="maps.center" :zoom="maps.zoom" :scroll-wheel-zoom="true">
							 <bm-marker :position="maps.center" :dragging="true" />
						 </baidu-map>
						<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="InformationImgs"></el-image> -->
					</div>
					<div class="mapBoxList">
						<div style="width:100%;height:340px">
						<!-- <vue-scroll :ops="ops" style="width:100%;height:340px"> -->
							<div class="mapBoxListItem flex" style="justify-content: space-between;">
								<div class="mapBoxListItemTitle">附近公司（{{nearbyCompany.totalNum?nearbyCompany.totalNum:0}}）</div>
								<el-button size="mini" type="primary" @click="join">申请加入</el-button>
							</div>
							 <el-checkbox-group class="mapBoxListItem" v-infinite-scroll="load" infinite-scroll-disabled="busy" style="height:290px;overflow:auto;border-bottom: none;" v-model="checkList">
                                <el-checkbox class="eliconcheck"  v-for="item in nearbyCompany.items" :label="item.id">
									<div class="mapBoxListItemTitle" style="width: 360px;">{{item.companyName}}</div>
									<div class="mapBoxListItemAddress"  style="width: 360px;">{{item.registeredAddress}}</div>
								</el-checkbox>
                            </el-checkbox-group>
							<!-- <div class="mapBoxListItem" v-infinite-scroll="load" infinite-scroll-disabled="busy" style="height:290px;overflow:auto;border-bottom: none;">
									<el-checkbox class="eliconcheck"  v-for="item in nearbyCompany.items" v-model="item.id">
										<div class="mapBoxListItemTitle" style="width: 360px;">{{item.companyName}}</div>
										<div class="mapBoxListItemAddress"  style="width: 360px;">{{item.registeredAddress}}</div>
									</el-checkbox>
							</div> -->
						</div>
						<!-- </vue-scroll> -->
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>
<script>
	// import address from '../../../../../utils/address.js'
	// import addresss from './components/SelectAddress.vue'
	export default {
		components:{
			// address
		},
		data() {
			return {
				nearbyCompany:{},
				busy: false,
				addressValue:[],
				maps:{
					// center:returnCitySN.cname,
					center: {lng: 106.53063501, lat: 29.54460611},
					zoom: 15
				},
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				userId: '',
				search: '',
				distance:{
					len:'1',
					distance:'',
					userLng:'',
					userLat:'',
					page:0,
					pageSize:6
				},
				distanceID:'',
				checkList: [],
				searchDataList: '',
				searchBottomDataList: '',
				addressArryList: new Map(), // 地址选择
				addressArry: {
					province: '', // 省
					provinceList: '', // 省数据
					city: '', // 市
					cityList: '', // 市数据
					district: '', // 区/县
					districtList: '', // 区/县数据
					town: '', // 镇
					townList: '', // 镇数据
					registeredAddress: '',
					addressData: ''
				}
			};
		},
		created() {
			// console.log(address)
		},
		watch:{
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 12)
			let userInfo = this.$store.state.user.userInfo
			this.userId = userInfo.id
			// cityData.cip
			// https://api.map.baidu.com/location/123.145.231.113?ak=SiEAmB39HjQ0FgSUORSG4bFiiXhqpIvw&coor=bd09ll
			// https://api.map.baidu.com/highacciploc/v1?qcip=220.181.38.113&qterm=pc&ak=请输入您的AK&coord=bd09ll
			// axios.get(`https://api.map.baidu.com/highacciploc/v1?qcip=123.145.231.113&qterm=pc&ak=SiEAmB39HjQ0FgSUORSG4bFiiXhqpIvw&coord=bd09ll`).then(res=>{
			// 	console.log(res)
			// })
			// this.$request.get('/api/addressBook/Weather/getIPXY',{
			// 	ip: cityData.cip
			// }).then(res=>{
			// 	if(res.code == 200){
			// 		// this.maps.center.lng = res.data.y
			// 		// this.maps.center.lat = Number(res.data.x)
			// 		console.log(res.data)
			// 	}
			// })
			this.getProvinceData()
			this.getAddress()
		},
		methods: {
			join(){
				this.$request.postForm(this.$api.applyToJoinTheCompany, {
					userId: this.userId,
					companyId:this.checkList.join(',')
				}).then(res=>{
					if(res.code == 200){
						this.$message.success(res.message)
					}
				})
			},
			load(){
				if(this.nearbyCompany.items &&  this.nearbyCompany.items.length > 0){
					this.busy = true
					this.distance.page ++
					this.$request.postForm(this.$api.searchCompany, this.distance
						).then(res=>{
						if(res.code == 200){
							if(this.distance.page>res.data.totalPage){return false}
							else if(res.data.items.length > 0){
								res.data.items.forEach(val =>{
									this.nearbyCompany.items.push(val)
								})
							}
						}
					})
					this.busy = false
				}
				
            },
			selectDistance(e){
				this.addressValue.forEach(item =>{
					if(item.id == e){
						this.distance.userLng = item.latitude
						this.distance.userLat = item.longitude
					}
				})
			},
			nearby(){
				if(this.distance.userLng == '' || this.distance.userLat == ''){
					this.$message.error('请选择地址')
				}else if(this.distance.distance == ''){
					this.$message.error('请填写范围')
				}else{
					this.$request.postForm(this.$api.searchCompany, this.distance
					).then(res=>{
					if(res.code == 200){
						this.nearbyCompany = res.data
						
					}
				})
				}
			},
			getAddress(){
				this.$request.get(this.$api.getCompanyAddress, {
					userId: this.userId,
				}).then(res=>{
					if(res.code == 200){
						this.addressValue = res.data
						if(this.addressValue.length > 0){
							this.distanceID = this.addressValue[0].id
							this.distance.userLng = this.addressValue[0].latitude
							this.distance.userLat = this.addressValue[0].longitude
						}
						
					}
				})
			},
			getAddressData(){

			},
			applyJoin(item){
				// 申请加入团队
				this.$request.postForm(this.$api.applyToJoinTheCompany, {
					userId: this.userId,
					companyId: item.id
				}).then(res=>{
					if(res.code == 200){
						this.$message.success('申请加入团队成功，请等待审核通过...')
						if(this.search){
							this.getCompanyList()
						} else {
							
							this.getCompanyList(this.addressArry.addressData)
						}
					}
				})
			},
			searchGs(){
				// 搜索公司
				// console.log(this.search)
				this.addressArry.addressData = ''
				this.addressArryList.clear()
				this.addressArry.province = ''
				this.addressArry.city = ''
				this.addressArry.cityList = ''
				this.addressArry.district = ''
				this.addressArry.districtList = ''
				this.addressArry.town = ''
				this.addressArry.townList = ''
				this.addressArry.registeredAddress = ''
				this.getCompanyList()
			},
			addsearch(){
				// 通过地址搜索
				console.log(this.addressArry.addressData)
				// if (this.addressArry.addressData !='') {
				// 	this.search = ''
				// 	this.getCompanyList(this.addressArry.addressData.join(''))
				// } else{
				// 	this.$message.error('请先选择地址')
				// }
				if(this.addressArryList.size < 1){
					this.$message.error('请先选择地址')
				} else {
					this.search = ''
					this.getCompanyList(this.addressArry.addressData)
				}
			},
			getCompanyList(addid = ''){
				// getCompanyByTerm
				this.$request.postForm(this.$api.getCompanyByTerm, {
					userId: this.userId,
					name: this.search,
					area: addid
				}).then( res => {
					if(res.code == 200){
						if (res.data && res.data.length > 0) {
							if(this.search){
								this.searchDataList = res.data
							} else {
								this.searchBottomDataList = res.data
							}
						} else{
							this.searchBottomDataList = ''
							this.searchDataList = ''
							this.$message.error('未搜索到公司数据')
						}
					}
				})
			},
			getProvinceData() {
				// 获取省数据
				this.getAllAddressList('', (province) => {
					this.addressArry.provinceList = province
					// console.log(this.addressArry.provinceList)
				})
			},
			getAllAddressList(id = '', callBack) {
				// 获取所有地址信息
				this.$request.postForm(this.$api.getAllAddress, {
					pid: id
				}).then(res => {
					if (res.code == 200) {
						callBack(res.data)
					}
				})
			},
			selectProvinceData(id){
				// 选择省数据清空后面所有选择框数据
				this.addressArry.cityList = ''
				this.addressArry.districtList = ''
				this.addressArry.townList = ''
				this.addressArry.city = ''
				this.addressArry.district = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				
				this.addressArry.provinceList.filter(item=>{
					if(item.id == id){
						this.addressArry.addressData = item.name
					}
				})
				// 获取市数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.cityList = city
				})
			},
			selectCityData(id){
				// 选择市数据清空后面所有选择框数据
				this.addressArry.districtList = ''
				this.addressArry.townList = ''
				this.addressArry.district = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				this.addressArry.cityList.filter(item=>{
					if(item.id == id){
						this.addressArry.addressData = item.name
					}
				})
				// 获取区县数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.districtList = city
				})
			},
			selectDistrictData(id){
				// 选择区县数据清空后面所有选择框数据
				this.addressArry.townList = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				this.addressArry.districtList.filter(item=>{
					if(item.id == id){
						this.addressArry.addressData = item.name
					}
				})
				// 获取镇数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.townList = city
				})
			},
			selectTownData(id){
				// 选择市数据清空后面所有选择框数据
				this.addressArryList.set('addId', id)
				this.addressArry.townList.filter(item=>{
					if(item.id == id){
						this.addressArry.addressData = item.name
					}
				})
			},
		}
	};
</script>

<style scoped="scoped">
	.pageTitle {
		padding: 10px 20px;
		border-bottom: 1px solid #DCDCDC;
		align-items: center;
		height: 53px;
	}

	.pageContent {
		padding: 20px;
	}

	.sectionTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		/* line-height: 30px; */
		background: #F3F3F3;
		padding: 10px 20px;
		align-items: center;
		justify-content: space-between;
	}

	.sectionCont {
		width: 100%;
		/* margin-left: 150px; */
		margin-top: 20px;
		margin-bottom: 60px;
	}

	.el-inputBox,
	.mapBox {
		justify-content: space-between;
	}

	.el-inputBoxel-inputBox {
		width: 300px;
	}

	.mapBox {
		margin-top: 20px;
		height: 300px;
	}

	.mapBoxmapBox {
		width: 460px;
		height: 340px;
		margin-right: 20px;
	}

	.mapBoxList {
		width: 430px;
	}

	.mapBoxListItem {
		width: 430px;
		padding: 10px;
		border-bottom: 1px solid #DCDCDC;
		position: relative;
		cursor: pointer;
		padding-left:10px;
	}
	.eliconcheck>>>.el-checkbox__input{
		/* position: absolute; */
		/* left: 10px; */
		margin-top: -30px;
	}
	.eliconcheck{
		border-bottom: 1px solid #DCDCDC;
		margin-right: 0;
		padding: 2px 0;
	}
	.mapBoxListItemTitle,
	.mapBoxListItemAddress {
		width: 390px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mapBoxListItemTitle {
		font-size: 14px;
		color: #333333;
	}

	.mapBoxListItemAddress {
		font-size: 12px;
		color: #808080;
	}

	.InformationImgs {
		width: 100%;
		height: 100%;
	}

	.el-icon-check {
		position: absolute;
		right: 0;
		top: 15px;
		bottom: 0;
		margin: auto;
		color: #23B14D;
	}

	.demo-ruleForm {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.demo-ruleForm>>>.el-select {
		width: 15rem;
		margin-right: 20px;
	}
	.consequenceList{
		width: 100%;
		padding: 20px;
		border: 1px solid #DCDCDC;
		margin-top: 10px;
	}
	.consequenceItem{
		justify-content: space-between;
		align-items: center;
	}
	.consequenceTitle{
		color: #454545;
		font-size: 12px;
	}
</style>
